import React from 'react';
import { BrowserRouter as Router, Routes, Route, Navigate } from 'react-router-dom';
import { Spin } from 'antd';
import { useAuthStore, useAppStore } from '@/store';
import Login from '@/pages/Login';
import MainLayout from '@/components/Layout/MainLayout';

const App: React.FC = () => {
  const { isAuthenticated } = useAuthStore();
  const { loading } = useAppStore();

  return (
    <div className="App">
      <Spin spinning={loading} size="large">
        <Router>
          <Routes>
            <Route path="/login" element={<Login />} />
            <Route 
              path="/*" 
              element={
                isAuthenticated ? (
                  <MainLayout />
                ) : (
                  <Navigate to="/login" replace />
                )
              } 
            />
          </Routes>
        </Router>
      </Spin>
    </div>
  );
};

export default App;